<template>
	<view class="font appearance">
		<image :src="img" mode="aspectFill" style="z-index: -1;"></image>
		<view class="content" v-show="current == 0">
			<view class="title">{{title}}</view>
			<button v-if='customButton' class="mybutton" :class="isActivitiesThat?'location2':'location1'"
				:style="{'background-color':customButtonColor,'color':color}">自定义按钮</button>
			<button class="mybutton location1" :style="{'background-color':activitiesBtnBgColor,'color':color}"
				v-if="isActivitiesThat">活动说明</button>
			<button class="mybutton location" :style="{'background-color':backgroundColor,'color':color}">{{btnText}}</button>
		</view>
		<view class="setting" @click="openSetting">
			<image class="Tshirt" src="@/static/Tshirt.png" mode=""></image>
		</view>
		<view class="save" @click="save">
			<image class="saveimg" src="@/static/save.png" mode=""></image>
		</view>
		<view class="answerTheQuestions" :style="{'background':isUrl?'url('+bgImg+') no-repeat':bgImg}"
			v-show="current == 1">
			<view class="title1" :style="{'color':titleColor}">{{title}}</view>
			<view class="subjectContent">
				<view class="Title" :style="{'color':topicDryColor,'font-size':titleSize+'px'}">
					<text>1.我是单选题</text>
				</view>
				<label :style="{'font-size':textSize+'px'}">
					<radio class="radio" disabled value="单选" /><text>选项1</text><br />
					<radio class="radio" disabled value="单选" /><text>选项2</text><br />
					<radio class="radio" disabled value="单选" /><text>选项3</text>
				</label>
				<view class="Title" :style="{'color':topicDryColor,'font-size':titleSize+'px'}">
					<text>2.我是多选题</text>
				</view>
				<label :style="{'font-size':textSize+'px'}">
					<checkbox class="radio" disabled /><text>选项1</text><br />
					<checkbox class="radio" disabled /><text>选项2</text><br />
					<checkbox class="radio" disabled /><text>选项3</text>
				</label>
				<view class="Title" :style="{'color':topicDryColor,'font-size':titleSize+'px'}">
					<text>3.我是填空题</text>
				</view>
				<view style="width: 80%;margin-left: 30rpx;margin-top: 20px;">
					<uni-easyinput disabled placeholder="请输入内容" />
				</view>
				<button class="mybutton1" :style="{'background-color':submitBtnColor}">提交</button>
			</view>
		</view>
		<uv-popup ref="popup" mode="right">
			<view style="width: 350rpx;">
				<uni-segmented-control :current="current" :values="items.map((v) => v.title)" @clickItem="onClickItem"
					style-type="text" active-color="#80b156"></uni-segmented-control>
				<uv-pick-color ref="picker" @confirm="confirm"></uv-pick-color>
				<view v-if="current == 0">
					<cover 
						:isActivitiesThat="isActivitiesThat" 
						:toEnableTheCover="toEnableTheCover" 
						:customButton="customButton"
						@Color="Color"
						@changeImg='changeImg'
						@changeBgImg='changeBgImg'
						@openCover='openCover'
						@changeBtnText='changeBtnText'
						@activeLink='activeLink'
						@openCustomButton='openCustomButton'
						@jumpCustomGraphicPage='jumpCustomGraphicPage'
						@openActivity='openActivity'
					>
					</cover>
				</view>
				<view v-if="current == 1">
					<answerTheQuestions 
						:textSize='textSize'
						:titleSize="titleSize"
						@Color="Color"
						@changeBgImg='changeBgImg'
						@changeTitleSize='changeTitleSize'
						@changeTextSize='changeTextSize'
					>
					</answerTheQuestions>
				</view>

			</view>
		</uv-popup>
	</view>
</template>

<script>
	import answerTheQuestions from "@/components/common/answerTheQuestions/answerTheQuestions"
	import cover from "@/components/common/cover/cover.vue"
	export default {
		name: "appearance",
		data() {
			return {
				formid:"",
				type: 0, //1.答题按钮颜色 2.活动说明按钮颜色 3.自定义按钮颜色 
				//4.答题纯色背景 5.答题提交按钮颜色 6.标题颜色 7.题干文字颜色
				img: "https://picnew12.photophoto.cn/20180927/lvseqingxinbeijing-29955215_1.jpg", //封面
				title: "", //问卷标题
				backgroundColor: "#80b156", //答题按钮背景色
				color: "#fff", //答题按钮文字颜色
				show: false, //是否开启封面设置
				items: [		//页面类型
					{ title: '封面' },
					{ title: '答题' }
				],
				current: 0,	//页面索引
				btnText: "开始答题",//答题按钮文案
				isActivitiesThat: false,//是否开启活动说明按钮
				activitiesBtnBgColor: "#80b156",// 活动说明按钮背景色
				toEnableTheCover: false, //是否开启封面
				graphicPageLinks: "",// 活动按钮跳转的图文页链接
				customButton: false,//开始开启自定义按钮
				customButtonColor: "#80b156", //自定义按钮颜色
				customButtonUrl: "",//自定义按钮链接
				/****** 答题 *********/
				isUrl: false,
				bgImg: "#ffffff",// 答题背景图
				textSize: "12",// 选项文字大小
				titleSize: "16", //题干文字大小
				titleColor: "#000",//标题颜色
				topicDryColor: "#000",//题干颜色
				submitBtnColor: "#000" //提交按钮颜色
			}
		},
		components: {
			answerTheQuestions,
			cover,
		},
		onLoad(option) { //默认加载
			var _this = this;
			this.$refs.popup.open();
			this.formid = option.formid
			this.$request('/QuestionnaireViewController/GetTheAppearanceOfTheQuestionnaire','GET',{formid:this.formid})
			.then(res=>{
				if(!res.data.data){
					return;
				}
				console.log(res);
				this.toEnableTheCover= res.data.data.toEnableTheCover
				this.img= res.data.data.img
				this.btnText= res.data.data.btnText
				this.backgroundColor= res.data.data.backgroundColor
				this.isActivitiesThat= res.data.data.isActivitiesThat
				this.activitiesBtnBgColor= res.data.data.activitiesBtnBgColor
				this.graphicPageLinks= res.data.data.graphicPageLinks
				this.customButton= res.data.data.customButton
				this.customButtonColor= res.data.data.customButtonColor
				this.customButtonUrl= res.data.data.customButtonUrl
				this.submitBtnColor= res.data.data.submitBtnColor
				this.titleColor= res.data.data.titleColor
				this.topicDryColor= res.data.data.topicDryColor
				this.textSize= res.data.data.textSize// 选项文字大小
				this.titleSize= res.data.data.titleSize //题干文字大小
				this.bgImg=res.data.data.bgImg
				if(res.data.data.bgImg.slice(0,4)=='http'){
					this.isUrl = true
				}else{
					this.isUrl = false
				}
			})
			this.$request('/QuestionnairePageController/getQuestionnaireName','GET',{formid:this.formid})
			.then(res=>{
				console.log(1,res);
				this.title = res.data.msg
			})
		},
		methods: {
			// 完成设置，保存
			save() {
				let data = {
					formid:this.formid,
					toEnableTheCover: this.toEnableTheCover,
					img: this.img,
					btnText: this.btnText,
					backgroundColor: this.backgroundColor,
					isActivitiesThat: this.isActivitiesThat,
					activitiesBtnBgColor: this.activitiesBtnBgColor,
					graphicPageLinks: this.graphicPageLinks,
					customButton: this.customButton,
					customButtonColor: this.customButtonColor,
					customButtonUrl: this.customButtonUrl,
					bgImg: this.bgImg,
					submitBtnColor: this.submitBtnColor,
					titleColor: this.titleColor,
					topicDryColor: this.topicDryColor,
					textSize: +this.textSize,// 选项文字大小
					titleSize: +this.titleSize, //题干文字大小
				}
				console.log(data);
				this.$request('/QuestionnaireViewController/SetTheAppearanceOfTheQuestionnaire', 'POST', data)
					.then(res => {
						console.log(res);
						uni.showModal({
							title:"提示",
							content:"设置成功",
							success: (res) => {
								if(res.confirm){
									uni.navigateBack()
								}
							}
						})
					})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			/*********** 封面 *************/
			Color(type) {  	//1.答题按钮颜色 2.活动说明按钮颜色 3.自定义按钮颜色
				this.type = type
				this.$refs.picker.open()
			},
			confirm(e) {
				let type = this.type
				let value = e.hex
				if (type == 1) {
					this.backgroundColor = value
				}
				else if (type == 2) {
					this.activitiesBtnBgColor = value
				}
				else if (type == 3) {
					this.customButtonColor = value
				}
				else if (type == 4) {
					this.isUrl = false
					this.bgImg = value
				}
				else if (type == 5) {
					this.submitBtnColor = value
				}
				else if (type == 6) {
					this.titleColor = value
				}
				else {
					this.topicDryColor = value
				}
			},
			/* ------------------------ */
			openSetting() {
				this.$refs.popup.open();
			},
			changeImg(imgUrl) {
				console.log(imgUrl);
				this.img = imgUrl
			},
			changeButtonBgColor(color) {
				this.backgroundColor = color
			},
			changeBtnText(text) {
				this.btnText = text
			},
			changeBtnActivity(color) {
				this.activitiesBtnBgColor = color
			},
			openActivity(value) {
				this.isActivitiesThat = value
			},
			openCover(value) {
				if (!value) {
					this.img = "https://cdn.pixabay.com/photo/2017/09/23/11/08/three-2778485_1280.png"
				}
				this.toEnableTheCover = value
			},
			openCustomButton(value) {
				this.customButton = value
			},
			activeLink(url) {
				this.graphicPageLinks = url
			},
			customColor(value) {
				this.customButtonColor = value
			},
			jumpCustomGraphicPage(url) {
				this.customButtonUrl = url
			},
			/************** 答题 ******************/
			changeBgImg(type, url) {
				this.isUrl = type
				this.bgImg = url
			},
			submitColor(value) {
				this.submitBtnColor = value
			},
			changeTitleColor(color) {
				this.titleColor = color
			},
			dryTextColor(value) {
				this.topicDryColor = value
			},
			changeTitleSize(size) {
				this.titleSize = size
			},
			changeTextSize(size) {
				this.textSize = size
			}
		},
	}
</script>

<style lang="less" scoped>
	.appearance {
		// width: 100%;
		height: 100vh;
		margin: 0;
		padding: 0;
		position: relative;
	}

	image {
		position: absolute;
		width: 100vw;
		height: 100vh;
	}

	.content {
		position: absolute;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

	.title {
		display: block;
		font-weight: bold;
		font-size: 50rpx;
		text-align: center;
		margin-top: 23%;
	}

	.mybutton {
		width: 60%;
		font-size: 40rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
	}

	.location {
		transform: translate(-50%, -50%);
	}

	.location1 {
		transform: translate(-50%, -170%);
	}

	.location2 {
		transform: translate(-50%, -290%);
	}

	.setting {
		z-index: 999;
		width: 100rpx;
		height: 90rpx;
		background-color: white;
		display: flex;
		align-items: center;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		position: absolute;
		right: 0;
		bottom: 60rpx;

		.Tshirt {
			width: 70rpx;
			height: 70rpx;
			margin-left: 20rpx;
		}
	}

	.save {
		z-index: 999;
		width: 100rpx;
		height: 90rpx;
		background-color: white;
		display: flex;
		align-items: center;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		position: absolute;
		right: 0;
		bottom: 160rpx;

		.saveimg {
			width: 50rpx;
			height: 50rpx;
			margin-left: 30rpx;
		}
	}

	.answerTheQuestions {
		width: 90vw;
		height: 96vh;
		background-color: white;
		position: absolute;
		z-index: 1;
		margin: 2vh 5vw;
		overflow: hidden;
		background-size: cover;
	}

	.title1 {
		display: block;
		font-weight: bold;
		font-size: 50rpx;
		text-align: center;
		margin-top: 10%;
	}

	.subjectContent {
		width: 90vw;
		margin-left: 5vw;
		margin-top: 4vh;
	}

	.radio {
		margin-left: 30rpx;
		margin-top: 10rpx;
		transform: scale(0.6);
	}

	.Title {
		margin-top: 20rpx;
	}

	.mybutton1 {
		width: 60%;
		font-size: 40rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
	}
</style>